<template>
  <div>

    <Input v-model="age" placeholder="请输入年龄"/>
    <Input v-model="name" placeholder="请输入姓名"/>

    <Button @click="addListData">添加</Button>
    <div>姓:{{xing}}
    </div>
    <div>名:{{ming}}</div>
    <div class=""> 名字倒叙:{{dao}}</div>
    <Button @click="showAll">全部显示</Button>
    <Button @click="hideAll">全部隐藏</Button>
    <div>
      <Button
        @click="toggle(index,item)"
        v-for="(item,index) in list"
        style="margin-right: 10px">
        第{{index + 1}}个:{{item.isShow ? '隐藏' : '显示'}}
      </Button>
    </div>
    <div
      v-for="(item,index) in list"
      v-if="item.isShow"
      :key="index"
      :style="listStyle"
    >
      <div>
        序号:{{index + 1}}
      </div>
      <div>
        姓名: <Input v-model="item.name"/>
      </div>
      <div>
        年龄:{{item.age}}
      </div>
      <Button @click="toggle(index,item)">隐藏</Button>
      <Button @click="removeList(index,item)">删除</Button>
    </div>
    

  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: '',
        age: '',
        listStyle: {
          border: '1px solid red',
          padding: '10px',
          margin: '10px'
        },

        list: [
          {
            name: 'efr',
            age: 12,
            isShow: true
          },
          {
            name: '绿宝宝',
            age: 12,
            isShow: true
          },
          {
            name: 'lvyaf',
            age: 18,
            isShow: true
          },
        ],


      };
    },
    mounted() {

    },

    components: {},
    methods: {
      toggle(index, item) {
        this.$Message.info((item.isShow ? '隐藏' : '显示') + (index + 1))
        this.list[index].isShow = !this.list[index].isShow;
      },
      addListData() {
        if (!this.name) {
          this.$Message.info('请输入名字')
          return;
        }
        if (!this.age) {
          this.$Message.info('请输入年龄')
          return;
        }
        this.list.push({
          name: this.name,
          age: this.age,
          isShow: true
        })

      },
      showAll() {
        this.list.map(item => {
          item.isShow = true;
        })
      },
      hideAll() {
        this.$Message.info("隐藏全部")
        this.list.map(item => {
          item.isShow = false;
        })

      },
      removeList(index) {
        this.list.splice(index, 1)
      }


    },
    computed: {
      xing() {
        return this.name[0]
      },
      ming() {
        return this.name.substr(1)
      },
      dao() {
        return this.name.split('').reverse().join('')
      }
    },
    watch: {
      xing(newValue, oldValue) {
        console.log(newValue, oldValue)
      }
    },


  };
</script>
<style lang="scss" scoped>
</style>


